<template>
  <div>
    <!--     搜索条件-->
    <SearchForm @search="getTableData" @reset="clearSearch">
      <el-col :span="8" :xs="24" v-show="$permiss[501]">
        <el-form-item :label="$t('所属租户')">
          <el-select v-model="page.adminUserId" @change="tenantChange" style="width: 100%" clearable>
            <el-option v-for="item in tenantList" :key="item.adminUserId" :label="item.adminName"
                       :value="item.adminUserId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('APP名称')" v-show="$permiss[500]">
          <el-select style="width: 100%" v-model="page.productId" clearable>
            <el-option v-for="item in productList" :key="item.productId" :label="item.appName"
                       :value="item.productId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('客群名称')">
          <el-select style="width: 100%" v-model="page.guestGroupId" clearable>
            <el-option v-for="item in guestGroupList" :key="item.guestGroupId" :label="item.guestGroupName"
                       :value="item.guestGroupId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('用户状态')">
          <el-select v-model="page.isNewCustomer" style="width: 100%" clearable>
            <el-option v-for="item in userType" :label="item.label" :key="item.value"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-form-item :label="$t('日期')">
          <el-date-picker
              v-model="page.timeValue"
              style="width: 100%"
              type="daterange"
              range-separator="~"
              value-format="yyyy-MM-dd"
              :start-placeholder="$t('开始时间')"
              :end-placeholder="$t('结束时间')">
          </el-date-picker>
        </el-form-item>
      </el-col>
    </SearchForm>

    <el-card shadow="never" style="margin-top: 10px">
      <Table :loading="loading" :table-column="tableColumn" :table-data="tableData" :page="page"
             @handleSizeChange="handleSizeChange"
             @handleCurrentChange="handleCurrentChange"/>
    </el-card>
  </div>
</template>

<script>
import {defaultTimeDate, dateFormatSection} from '@/utils/tools'
import {selectProduct, selectTenant} from "@/api/system";
import {guestGroupList, collectionDataCollectionPgeList} from "@/api/postLoan";

export default {
  name: 'loanReportCustomers',
  data() {
    return {
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        timeValue: defaultTimeDate(14)
      },
      productList: [],
      tenantList: [],
      userType: [
        {label: this.$t('新客'), value: 0},
        {label: this.$t('老客'), value: 1},
      ],
      guestGroupList: [],
      tableData: [],
      tableColumn: [
        {label: this.$t('日期'), prop: 'dateStr', minWidth: 100, fixed: 'left'},
        {label: this.$t('客群'), prop: 'guestGroupName', fixed: 'left'},
        {label: this.$t('入催订单数'), prop: 'urgeOrderNum'},
        {label: this.$t('入催金额'), prop: 'urgeAmount'},
        {label: this.$t('入催合同金额'), prop: 'urgePassAmount', minWidth: 150},
        {label: this.$t('入催罚息'), prop: 'urgeOverdueFine'},
        {label: this.$t('入催利息'), prop: 'urgeInterestFine'},
        {label: this.$t('入催订单催回数'), prop: 'urgeRecallOrderNum', minWidth: 150},
        {label: this.$t('入催订单催回率'), prop: 'urgeRecallOrderRate', minWidth: 150},
        {label: this.$t('入催催回金额'), prop: 'urgeRecallAmount', minWidth: 150},
        {label: this.$t('入催金额催回率'), prop: 'urgeRecallAmountRate', minWidth: 150},
        {label: this.$t('入催催回合同金额'), prop: 'urgeRecallPassAmount', minWidth: 150},
        {label: this.$t('入催合同金额催回率'), prop: 'urgeRecallPassAmountRate', minWidth: 150},
        {label: this.$t('总订单数'), prop: 'stockOrderNum'},
        {label: this.$t('库存金额'), prop: 'stockAmount'},
        {label: this.$t('库存合同金额'), prop: 'stockPassAmount', minWidth: 100},
        {label: this.$t('库存订单催回数'), prop: 'stockRecallOrderNum', minWidth: 150},
        {label: this.$t('库存订单催回率'), prop: 'stockRecallOrderRate', minWidth: 150},
        {label: this.$t('库存催回金额'), prop: 'stockRecallAmount', minWidth: 150},
        {label: this.$t('库存金额催回率'), prop: 'stockRecallAmountRate', minWidth: 150},
        {label: this.$t('库存催回合同金额'), prop: 'stockRecallPassAmount', minWidth: 150},
        {label: this.$t('库存合同金额催回率'), prop: 'stockRecallPassAmountRate', minWidth: 150},
        {label: this.$t('未催回数'), prop: 'notRecallNum'},
        {label: this.$t('未催回金额'), prop: 'notRecallAmount'},
        {label: this.$t('未催回合同金额'), prop: 'notRecallPassAmount', minWidth: 150},
        {label: this.$t('未催回罚息'), prop: 'notRecallOverdueFine'},
        {label: this.$t('未催回利息'), prop: 'notRecallInterestFine'},
      ],
      loading: false
    }
  },
  mounted() {
    this.getTableData()
    selectTenant().then(res => {
      this.tenantList = res.data
    })
    selectProduct().then(res => {
      this.productList = res.data
    })
    guestGroupList({type: 1, pageNum: 1, pageSize: 100}).then(res => {
      this.guestGroupList = res.data.list || []
    })
  },
  methods: {
    async getTableData() {
      this.loading = true
      const timeValue = dateFormatSection(this.page.timeValue)
      const params = Object.assign({}, this.page, {
        startTime: timeValue && timeValue.length > 1 ? timeValue[0] : undefined,
        endTime: timeValue && timeValue.length > 1 ? timeValue[1] : undefined
      })
      delete params.timeValue
      const res = await collectionDataCollectionPgeList(params)
      if (res.code === 1) {
        const {list, total} = res.data
        this.tableData = list.map(item => {
          let {
            urgeRecallOrderRate,
            urgeRecallAmountRate,
            urgeRecallPassAmountRate,
            stockRecallOrderRate,
            stockRecallAmountRate,
            stockRecallPassAmountRate
          } = item
          urgeRecallOrderRate = urgeRecallOrderRate + '%'
          urgeRecallAmountRate = urgeRecallAmountRate + '%'
          urgeRecallPassAmountRate = urgeRecallPassAmountRate + '%'
          stockRecallOrderRate = stockRecallOrderRate + '%'
          stockRecallAmountRate = stockRecallAmountRate + '%'
          stockRecallPassAmountRate = stockRecallPassAmountRate + '%'
          return {
            ...item,
            urgeRecallOrderRate,
            urgeRecallAmountRate,
            urgeRecallPassAmountRate,
            stockRecallOrderRate,
            stockRecallAmountRate,
            stockRecallPassAmountRate
          }
        })
        this.page = Object.assign({}, this.page, {
          total: total
        })
      }
      this.loading = false
    },
    clearSearch() {
      this.page = {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
      this.getTableData()
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getTableData()
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getTableData()
    },
    tenantChange(value) {
      // 获取客群名称
      guestGroupList({
        pageNum: 1,
        pageSize: 1000,
        type: 1,
        adminUserId: value
      }).then(res => {
        const {list} = res.data
        this.guestGroupList = list || []
        this.$set(this.page, 'guestGroupId', null)
      })
      selectProduct({adminUserId: value}).then(res => {
        this.productList = res.data
        this.$set(this.page, 'productId', null)
      })
    },
  }
}
</script>

<style scoped>

</style>
